<template>
	<view class="flex align-center justify-center">
		<svg :width="size" :height="size">
		  <circle :cx="size/2" :cy="size/2" :r="size/2 - strokeWidth/2" fill="none" :stroke="bgColor" :stroke-width="strokeWidth" />
		  <circle :cx="size/2" :cy="size/2" :r="size/2 - strokeWidth/2" fill="none" :stroke="color" stroke-linecap="round" :stroke-width="strokeWidth" :stroke-dasharray="sum" :stroke-dashoffset="offset" />
		</svg>
	</view>
</template>

<script>
export default{
	props:{
		colors:{
			type:Array,
			default:()=>['#1F84FC','#65B87D','#e54d42']
		},
		color:{
			type:String,
			default:'#1F84FC',
		},
		size:{
			type:Number,
			default:200
		},
		bgColor:{
			type:String,
			default:'#F5F7FA',
		},
		strokeWidth:{
			type:Number,
			default:20
		},
		progress:{
			type:Number,
			default:90
		}
	},
	data(){
		return{
			sum:0,//总长度
			offset:0,//偏移量
		}
	},
	mounted() {
		this.init()
	},
	methods:{
		init(){
			this.sum = 2 * Math.PI * (this.size/2 - this.strokeWidth/2); // 计算圆的周长
			this.offset = this.sum - (this.progress / 100) * this.sum;// 计算偏移量
		}
	}
}
</script>

<style>
</style>